<template>
	<div class="index-view-rd">
		<div class="header">
			<div class="logo-wrap ofH">
				<img src="~__assets/images/icon/logo.png" class="fl logo" alt="">
				<div class="func">
					<router-link to="/search" class="h-func-item search"><i class="icon"></i></router-link>
					<router-link to="/message" class="h-func-item message"><i class="icon"></i></router-link>
					<a href="javascript:;" @click="linkus" class="h-func-item kf"><i class="icon"></i></a>
				</div>
			</div>
			<div class="ptab">
				<tab :line-width="2" active-color="#02d560" custom-bar-width="20px" :scroll-threshold="6">
				  <tab-item v-for="(item,index) in cateData" :selected="tabSelIndex == index" @click.native="tabSel(item.url,index)" :key="index">{{item.name}}</tab-item>
				</tab>
			</div>
		</div>
		
		<div class="plist">
			<div class="wrapper" ref="wrapper">
				<div v-show="projectData.length > 0">
					<div class="top-tip">
	                    <span class="refresh-hook" v-html="pulldownMsg"></span>
	                </div>
					<ul class="content project-wrap">
						<li class="project-item" v-for="(item,index) in projectData">
							<router-link :to="{path:'/productDetail',query:{id:item.id}}">
								<div class="d-project-header clearfix">
									<div class="initiator">
										<img :src=" item.avatar ? 'http://zc.wzgaolaozhuang.com/'+item.avatar : defaultAvatar" class="initiator-avatar" alt="">
										<span class="initiator-name">{{item.user_name}}</span>
									</div>
									<div class="pj-status appointment">
										<i class="icon icon-appointment"></i>
										<span class="text-appointment">{{item.type == 1 ? statusHandle(item.begin_time,item.now_time,item.end_time,item.type,item.is_success) : statusHandle2(item.status,item.percent)}}</span>
									</div>
								</div>
								<div class="d-project-content">
									<div class="project-img">
										<img :src="'http://zc.wzgaolaozhuang.com/'+item.image" alt="">
										<div class="img-intro slh">
											 {{item.brief}}
										</div>
									</div>
									<div class="project-data">
										<div class="d-project-content-title">
											{{item.name}}
										</div>
										<div class="d-project-content-type">
											<span class="sort-item">
												<i class="icon icon-build"></i>{{item.cate_name}}
											</span>
											<span class="sort-item">
												<i class="icon icon-address"></i>{{item.province}}-{{item.city}}
											</span>
										</div>
										<div class="progress">
											<div class="box-row">
												<div class="time flex-1">剩余时间: {{item.remain_days}}</div>
												<div class="percent flex-1 left-1px">预约进度: {{item.percent}}%</div>
											</div>
											<div class="weui-progress">
												<div class="weui-progress__bar">
													<div class="weui-progress__inner-bar" :style="{width: item.percent > 100 ? '100%' : item.percent + '%'}"></div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</router-link>
						</li>
					</ul>
					<div class="bottom-tip">
	                    <span class="loading-hook">{{pullupMsg}}</span>
	                </div>
                </div>
                <div class="project-item" v-show="projectData.length <= 0">
						<div class="d-project-content pt20">
							<div class="project-img">
								<img src="~__assets/images/preview.jpg" alt="">
							</div>
							<div class="project-data">
								<div class="d-project-content-title">
									暂无产品
								</div>
							</div>
						</div>
					</div>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
	.vux-tab .vux-tab-item{background:#ffffff !important;}
	.index-view-rd{background-color:#ececec;}
	.project-item{
		background-color: #ffffff;
		padding: 0 a(30px);
		margin-top: a(20px);
		&:first-child{
			margin-top: 5px;
		}
		.initiator{
			float: left;
			@include lh(a(112px));
			.initiator-avatar{
				display: inline-block;
				width: a(50px);
				height: a(50px);
				border-radius: 50%;
			}
			.initiator-name{
				font-size: 12px;
				display: inline-block;
				margin-left: a(20px);
			}
		}
		.pj-status{
			float: right;
			@include lh(a(112px));

			&.appointment{
				.text-appointment{
					font-size: $f24;
					color: #02D560;
					display: inline-block;
				}
				.icon-appointment{
					display: inline-block;
					vertical-align: a(-4px);
					@include bg("~__assets/images/icon/iconfont-appiontment.png",a(26px),a(27px));
				}
			}
			&.subscription{
				color: #0f2dcd;
			}
		}
		.d-project-content{
			margin: 0 auto;
			.project-img{
				position: relative;
				width: 100%;
				height: a(400px);
				img{
					width: 100%;
					height: 100%;
				}
				.img-intro{
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: a(90px);
					background-image: linear-gradient(-180deg,rgba(0,0,0,0) 0,rgba(102,102,102,.7) 100%);
					font-size: 14px;
					color:#ffffff;
					padding: a(30px) a(20px) 0;
				}
			}
		}
		.d-project-content-title{
			font-size: 18px;
			padding: a(30px) a(20px);
		}
		@media screen and (max-width:413px) and (min-width:359px) {
		  .d-project-content .d-project-content-type .sort-item {
		    padding-right: 18% !important
		  }

		  .d-project-content .d-project-content-type .sort-item:last-child {
		    padding-right: 0 !important
		  }
		}

		@media screen and (min-width:413px) {
		  .d-project-content .d-project-content-type .sort-item {
		    padding-right: 20% !important
		  }

		  .d-project-content .d-project-content-type .sort-item:last-child {
		    padding-right: 0 !important
		  }
		}
		.sort-item{
			font-size: 12px;
			.icon{margin-right: 10px;vertical-align: -1px;}
		}
		.d-project-content-type{
			padding: 0 a(20px) a(26px);
			color: #666;
		}
		.icon-build{
			@include bg("~__assets/images/icon/iconfont-build-1.png",10px,14px);
		}
		.icon-address{
			@include bg("~__assets/images/icon/iconfont-address-1.png",8px,14px);
		}
		.progress{
			padding-bottom: a(30px);
			.time{
				text-align: left;
				padding-left: a(20px);
				font-size: 10px;
				color: rgb(89, 89, 89);
			}
			.percent{
				text-align: right;
				padding-right: a(20px);
				font-size: 10px;
				color: rgb(2, 213, 96);
			}
			.weui-progress{
				margin-top: a(20px);
				display: -webkit-box;
			    display: -webkit-flex;
			    display: flex;
			    -webkit-box-align: center;
			    -webkit-align-items: center;
			    align-items: center;

			    .weui-progress__bar {
				    border-radius: a(3px);
				    height: 3px!important;
				    background-color: #ebebeb;
				    -webkit-box-flex: 1;
				    -webkit-flex: 1;
				    flex: 1;
				}
				.weui-progress__inner-bar {
				    border-radius: a(3px);
				    width: 0;
				    height: 100%;
					background: linear-gradient(left top,#00FF00,#02D560);
				    background: -webkit-linear-gradient(left top,#00FF00,#02D560);
				    background: -moz-linear-gradient(left top,#00FF00,#02D560);
				}
			}
		}
	}
	.top-tip{
        position: absolute;  
        top: -40px;  
        left: 0;
        z-index: 1;  
        width: 100%;  
        height:40px;  
        line-height:40px;  
        text-align:center;
        color: #555;
    } 
      
    .bottom-tip{
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        color: #777;
        background: #f9f9f9;
        position: absolute;
        bottom: -35px;
        left: 0;
    }

	.header{
		position: fixed;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		background-color: #ffffff;
		z-index: 997;
		padding-top: 20px;
		@include boxShadow(10px);
		.logo-wrap{
			padding: 0 0 10px a(42px);
		}
		.logo{
			width: 109px;
			height: 15px;
		}
		.func{
			float: right;
			.h-func-item{
				display: inline-block;
				margin-right: a(30px);
			}
			.search i{@include bg("~__assets/images/icon/iconfont-search.png",17px,17px);}
			.message i{@include bg("~__assets/images/icon/iconfont-message.png",17px,16px);}
			.kf i{@include bg("~__assets/images/icon/iconfont-kf-1.png",20px,16px);}
		}
	}
	
	.plist{
		position: absolute;
		left: 0;
		top: 96px;
		bottom: 66px;
		width: 100%;
		background-color:#f9f9f9;
		.wrapper{
			height: 100%;
		}
	}
	.rotate {
	  display: inline-block;
	  transform: rotate(-180deg);
	}
	.pullup-arrow {
	  transition: all linear 0.2s;
	  color: #666;
	  font-size: 25px;
	}
</style>

<script>
	import Bscroll from 'better-scroll';
	import preview from '__assets/images/preview.jpg';
	import defaultAvatar from '__assets/images/avatar.png'
	import {getIndexList} from '__api'
	import wxapi from '@/api/wxapi.js'
	export default{
		name:"index-view",
		//components:{ Scroller,Spinner,LoadMore },
		data(){return{
			page: 1,
			tabUrl: '/wap/index.php?ctl=index&tpl=1',
			defaultAvatar:defaultAvatar,
			tabSelIndex: 0,
			cateData: [{id: 0,name:'最新',url:'/wap/index.php?ctl=index&tpl=1'}],
	      	pulldownMsg: '下拉刷新',
	      	pulldownStatus: false,
	      	allLoad: true,
            pullupMsg: '已全部加载',
            projectData: [
            ],
            listInitStatus: true
		}},
		activated(){
			if(this.scroll){
				this.scroll.refresh();
			}
		},
		created(){
			let that = this;
			this.$nextTick(() => {
	            if (!this.scroll) {
	              this.scroll = new Bscroll(this.$refs.wrapper, {
	              		probeType:1,
                        click: true,
                        pullDownRefresh: {
						  threshold: 60,
						  stop: 40
						},
						pullUpLoad: {
				          threshold: -30, // 当上拉距离超过30px时触发 pullingUp 事件
				          stop: 40
				        }
	              })
	              this.scroll.on('scroll',(pos)=>{
	                    if(pos.y > 50){
	                        this.pulldownStatus = true;
	                    }
	                });
	              this.scroll.on('touchEnd', (pos) => {
	                if(pos.y > 50){
	                	that.pulldownMsg = "<span class='logo-span'><span class='f'>F</span><span class='u'>U</span><span class='n'>N</span><span class='s'>S</span></span> 加载中...";
	                	that.page = 1;
	                	that.allLoad = false;
                        that.getData(true,true)
                    }
                    else if(pos.y<(that.scroll.maxScrollY - 30)){   //下拉加载
                    	if(!that.allLoad){
                    		that.page++;
                    		that.pullupMsg = '加载中...';
	                        that.getData(false,false)
                    	}
                    }
	              })
	            } else {
	              this.scroll.refresh()
	            }

	            this.$loading({nozz:true,small:true});

                getIndexList({
                }).then( res => {
                	if(res.cate_result.length > 5){
                		res.cate_result.length = 5;
                	}
                    
                    this.cateData = this.cateData.concat(res.cate_result);
                    //刷新数据
                    this.projectData = [];
                    this.projectData = this.projectData.concat(res.deal_all_result.list);
                    this.listInitStatus = true;
                    //刷新列表后，重新计算滚动区域高度
                    this.scroll.refresh();
                    this.$loading.end();
                })
	          })
		},
		mounted(){
			wxapi.wxRegister(this.wxRegCallback);
		},
		methods:{
			linkus(){
				_MEIQIA('withoutBtn');
    			_MEIQIA('init');
			    _MEIQIA('allSet', function(){
			      _MEIQIA('showPanel');
			    });
			},
			tabSel(url,index){
				this.page = 1;
				this.tabUrl = url;
				this.tabSelIndex = index;
				if(index == 0){
					this.allLoad = true;
					this.pullupMsg = '已全部加载';
				} else {
					this.allLoad = false;
					this.pullupMsg = '加载中...';
				}
				this.getData(true,true);
			},
			getData(clearData,isPullDown){
				this.$loading({nozz:true,small:true});
				getIndexList({
					url: this.tabUrl+'&p='+this.page,
                }).then( res => {
                    //刷新数据
                    if(clearData){
                    	this.projectData = [];
                    }
                    if(this.tabSelIndex == 0){
                    	this.projectData = this.projectData.concat(res.deal_all_result.list);
                    } else {
                    	this.projectData = this.projectData.concat(res.deal_list);
                    	if(res.deal_list.length < res.pages[0]){
                    		this.allLoad = true;
                    		this.pullupMsg = '已全部加载'
                    	}
                    	console.log(this.projectData)
                    	console.log(res.deal_list)
                    }
                    this.listInitStatus = true;

                    if(isPullDown){
                    	setTimeout(()=>{
                        	this.pulldownMsg = '下拉刷新'
                        	//刷新列表后，重新计算滚动区域高度
							this.scroll.refresh();
                        	this.scroll.finishPullDown();
                        },500)
                    } else {
                    	if(!this.allLoad) this.pullupMsg = '加载更多';
		                //刷新列表后，重新计算滚动区域高度
						this.scroll.refresh();
		                this.scroll.finishPullUp();
                    }

                    this.$loading.end();
                })
			},
			statusHandle(bt,nt,et,type,is_success){
				nt = nt ? nt : Date.parse(new Date())/1000;
				let r = '预约中';
				if(bt>nt){
					r = '预热中';
				}
				else if(et<nt && et != 0){
					if(is_success == 1){
						r = '已成功'
					} else {
						r = '失败'
					}
				} else {
					if( type == 1){
						r = '预约中'
					}
				}
				return r;
			},
			statusHandle2(s,p){
				let r = '开放认购中';
				if(s == 0){
					r = '预热中'
				} else {
					if( p >= 100) {
						r = '已成功'
					} else {
						if( s == 1){
							r = '已成功'
						} else if( s == 2) {
							r = '已失败'
						} else if( s == 3){
							r = '开放认购中'
						} else if( s == 4){
							r = '长期项目'
						}
					}
				}
				return r;
			},
			wxRegCallback () {
			  // 用于微信JS-SDK回调
			  this.wxShareTimeline()
			  this.wxShareAppMessage()
			},
			wxShareTimeline () {
			  // 微信自定义分享到朋友圈
			  let option = {
			    title: '乐趣投', // 分享标题, 请自行替换
			    link: window.location.href, // 分享链接，根据自身项目决定是否需要split
			    imgUrl: 'http://www.lqtou.com/share/logo.png', // 分享图标, 请自行替换，需要绝对路径
			    success: () => {
			      alert('分享成功')
			    },
			    error: () => {
			      alert('已取消分享')
			    }
			  }
			  // 将配置注入通用方法
			  wxapi.ShareTimeline(option)
			},
			wxShareAppMessage () {
			  // 微信自定义分享给朋友
			  let option = {
			    title: '乐趣投', // 分享标题, 请自行替换
			    desc: '乐趣的私密投资圈', // 分享描述, 请自行替换
			    link: window.location.href, // 分享链接，根据自身项目决定是否需要split
			    imgUrl: 'http://www.lqtou.com/share/logo.png', // 分享图标, 请自行替换，需要绝对路径
			    success: () => {
			      alert('分享成功')
			    },
			    error: () => {
			      alert('已取消分享')
			    }
			  }
			  // 将配置注入通用方法
			  wxapi.ShareAppMessage(option)
			}
		}
	};

</script>